import React from 'react'
import { useLocation } from 'react-router-dom'

const Detail = function () {
  //1.params参数
  // import { useParams } from 'react-router-dom'
  // let {id, title} = useParams();

  // 2.search参数
  //接收参数: v6版本
  // import { useSearchParams } from 'react-router-dom'
  // let [searchParams] = useSearchParams();
  // let id = searchParams.get("id");
  // let title = searchParams.get("title");

  // 3.state参数
  // 组路由接收state参数 通过useSearchParams方法
  let location = useLocation()
  let {id,title}=location.state;
  console.log({id,title});

  const DetailData = [
    {id:'01', content: '你好,中国'},
    {id:'02', content: '你好,react'},
    {id:'03', content: '你好,未来的自己'},
  ];

  // 接收state参数
  console.log(id, title);
  const findResult = DetailData.find((item) => {
    return item.id === id
  })
  return (
    <>
      <li>ID: {id}</li>
      <li>TITLE: {title}</li>
      <li>CONTENT: {findResult.content}</li>
    </>
  )
}
export default Detail;
